<!DOCTYPE html>
<meta charset="utf-8">

<html>
  <head>
    <title>Minigo: kiosk</title>
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="socketio/socket.io.min.js"></script>
    <script data-main="kiosk" src="require/require.js"></script>
    <style>
      body { cursor: none; }

      .minigui {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        height: 78vh;
        margin-top: 10vh;
      }

      #main-board { width: 100%; height: 100%; }
      .main-board-pad { height: 100%; width: 78vh; padding: 3vh; }
      .small-board { width: 24vh; height: 24vh; }
      .graph { width: 32vh; height: 24vh; }
      .log-container { width: 32vh; height: 51vh; }
      .log { height: 51vh; font-size: 0.7vh; }
    </style>
  </head>
  <body>
    <div class="minigui"
         data-gtp-report_search_interval="50">
      <div class="main-board-pad board"><div id="main-board"></div></div>
      <div class="sp-3vh"></div>
      <div class="fs-0">
        <div id="search-board" class="board small-board"></div>
        <div class="sp-3vh"></div>
        <div id="n-board" class="board small-board"></div>
        <div class="sp-3vh"></div>
        <div id="dq-board" class="board small-board"></div>
      </div>
      <div class="sp-3vh"></div>
      <div class="fs-0">
        <div id="winrate-graph" class="graph"></div>
        <div class="sp-3vh"></div>
        <div class="log-container">
          <div id="log" class="log"></div>
        </div>
      </div>
    </div>
  </body>
</html>
